<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Netty-Websocket</title>
    <script type="text/javascript" th:src="@{/js/jquery-3.5.0.js}"></script>
</head>
<body>
    <label>发送人ID:</label>
    <input type="text" id="userId" /><input type="button" value="连接websocket" onClick="connect()" />  <br />
    <label>接收人ID:</label>
    <input type="text" id="receiveId" name="接收人ids" />
    <br />
    <textarea id="msgText" rows="10" cols="100"></textarea>
    <input type="button" value="发送ws消息" onClick="sendMsg()" />
    <br />
    <input type="file" id="file" name="文件发送">
    <input type="button" value="发送文件" onClick="sendFile()" />
    <img id="img" src="">
    <hr color="black" />
    <h3>服务端返回的应答消息</h3>
    <textarea id="responseText" style="width: 1024px;height: 300px;"></textarea>
    <input type="button" value="清空消息" onClick="clean()" />

    <script type="text/javascript">

        // by zhengkai.blog.csdn.net
        var socket;
        function connect(){        
            if(!window.WebSocket){
                window.WebSocket = window.MozWebSocket;
            }
            if(window.WebSocket){
                //建立socket链接
                socket = new WebSocket("ws://localhost:8999/ws?id="+$('#userId').val());
                //收到消息事件处理
                socket.onmessage = function(event){
                    var ta = document.getElementById('responseText');
                    ta.value += event.data+"\n";
                    if (event.data instanceof Blob){
                        console.log("接收二进制数据")
                        console.log(event.data)
                        var blob = new Blob([event.data], {type: 'application/octet-stream'}); // 传入一个合适的 MIME 类型
                        var url = URL.createObjectURL(blob);
                        var b = confirm("跳转图片显示地址"+url);
                        if (b){
                            document.write("<img src= "+url+" alt='图片信息' />");
                        }
                    }

                };
                //连接成功事件处理
                socket.onopen = function(event){
                    var ta = document.getElementById('responseText');
                    ta.value = "Netty-WebSocket服务器。。。。。。连接成功 用户ID："+$('#userId').val()+"\n";
                };
                //连接关闭事件处理
                socket.onclose = function(event){
                    var ta = document.getElementById('responseText');
                    ta.value = "Netty-WebSocket服务器。。。。。。关闭 \n";
                };
                socket.onerror = function (ev) {
                    console.log(ev)
                }
            }else{
                alert("您的浏览器不支持WebSocket协议！");
            }
        }

        var message = {
            "sendId":"",
            "receiveId":"",
            "msg":"",
            "sendTime":""
        }

        function sendMsg(){
            if(!window.WebSocket){return;}
                message.sendId = $('#userId').val();
                message.receiveId =$('#receiveId').val();
                message.msg = $('#msgText').val();
                message.sendTime = Date.now();
            var json = JSON.stringify(message);
            console.log("发送内容长度："+json.length)
            socket.send(json);
        }
        function sendFile() {
            if(!window.WebSocket){return;}
            var inputElement = document.getElementById("file");
            var fileList = inputElement.files;
            for ( var i = 0; i < fileList.length; i++) {
                var reader = new FileReader();
                reader.readAsArrayBuffer(fileList[i]);
                reader.onload = function loaded(evt) {
                    var binaryString = evt.target.result;
                    console.log("发送二进制数据")
                    console.log(binaryString)
                    socket.send(binaryString);
                }
            }
        }

        function clean(){
            var ta = document.getElementById('responseText');
            ta.value = " ";
        }
 
    </script>
</body>
</html>